window.onload = function () {
    function initCharts (data){
        $.ajax({
        type: "POST",
        url: "/analyze/repaymentStructPerYearData",
        data:data,
        success: function (msg){
            var myChart = echarts.init($('#prodNumber').get(0));
            console.log(msg.result);
            var allData = msg.result,
                quantity1 = [],
                quantity2 = [],
                startDate = [];
            allData.forEach(function(data,index){
                quantity1[index] = data.esateCount1;
                quantity2[index] = data.esateCount2;
                startDate[index] = (data.payOffAt);
            });
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    },
                    //formatter:'{b0}<br/>还清：{c0}</br> 未还清：{c1} </br>'
                    formatter: function(params) {
                        var res = '<div>';
                        res += '<strong>' + params[0].name + '</strong>'
                        for (var i = 0, l = params.length; i < l; i++) {
                            if (params[i].seriesName == '还清贷款数量') {
                                res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 笔'
                            }
                            if (params[i].seriesName == '未还清贷款数量') {
                                res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 笔'
                            }
                        }
                        res += '</div>';
                        return res;
                    }
                },
                legend: {
                    orient: 'vertical',
                    bottom:'bottom',
                    data:['还清贷款数量','未还清贷款数量'],
                    textStyle: {
                        color : "#ADADAD"
                    },
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLabel: {
                            interval: 0,
                            rotate: 0
                        },
                        data: startDate,
                        axisLine:{
                            lineStyle:{
                                color:'#ADADAD',
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '数量(个)',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#ADADAD',
                            }
                        },
                    }
                ],
                series: [
                    {
                        name:'还清贷款数量',
                        type:'bar',
                        data:quantity1
                    },
                    {
                        name:'未还清贷款数量',
                        type:'bar',
                        data:quantity2
                    }
                ]
            };
            if(startDate.length>10){
                option.xAxis[0].axisLabel.rotate = 30
            }

            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize()
            };
        }
    })};
    initCharts();
    $('#searchData').click(function(){
        var inputData = [],
            citys = $('#city').val(),
            districts = $('#district').val(),
            loansBalanceStarts = $('#loansBalanceStart').val(),
            loansBalanceEnds =  $('#loansBalanceEnd').val(),
            loansAmountStarts = $('#loansAmountStart').val(),
            loansAmountEnds = $('#loansAmountEnd').val(),
            startDateStarts = $('#startDateStart').val(),
            startDateEnds = $('#startDateEnd').val(),
            loansDurations = $('#loansDuration').val(),
            remainTimes = $('#remainTime').val(),
            risk = $('#risk').val(),
            buildAreaEnds = $('#buildAreaEnd').val(),
            buildAreaStarts = $('#buildAreaStart').val(),
            endDateStarts = $('#endDateStart').val(),
            endDateEnds = $('#endDateEnd').val(),
            inputData = {
                city:citys,
                district:districts,
                loansBalanceStart:loansBalanceStarts,
                loansBalanceEnd:loansBalanceEnds,
                loansAmountStart:loansAmountStarts,
                loansAmountEnd:loansAmountEnds,
                startDateStart:startDateStarts,
                startDateEnd:startDateEnds,
                loansDuration:loansDurations,
                remainTime:remainTimes,
                risk:risk,
                buildAreaEnd:buildAreaEnds,
                buildAreaStart:buildAreaStarts,
                endDateStart:endDateStarts,
                endDateEnd:endDateEnds
            };

        initCharts(inputData)
    });
}